<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 列表 -->
    <table class="table table-hover table-striped" id="table_result">
        <thead>
            <tr>
                <th>titieOne</th>
                <th>titleTwo</th>
                <th>titleThree</th>
            </tr>
        </thead>
        <tbody id="result">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
    <!-- 分页生成的页码在这里显示 -->
    <div class="col-sm-6">
        <div class="dataTables_info" id="info"></div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables">
            <ul class="pagination" id="pagination">
                //
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

<script>
    // 分页功能
    goPage(1, 2); // 我这里调用每页显示两条从一页开始


    function goPage(pno, psize) {
        var itable = document.getElementById("result"); //通过ID找到表格
        var idecs = document.getElementById("info");
        var num = itable.rows.length; //表格所有行数(所有记录数)
        var totalPage = 0; //总页数
        var pageSize = psize; //每页显示行数
        //总共分几页(总页数/每页要显示的行数)
        if (num % pageSize != 0) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }

        var currentPage = pno; //当前页数
        var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行 1
        var endRow = currentPage * pageSize; //结束显示的行   3
        endRow = (endRow > num) ? num : endRow;

        for (var i = 1; i < num + 1; i++) { //遍历所有数据,rows[i]是从0开始，但是后面与startRow做比较，所以i从1开始；
            var irow = itable.rows[i - 1]; //i-1，数据重0开始显示
            if (i >= startRow && i <= endRow) {
                irow.style.display = "table-row";

            } else {
                irow.style.display = "none";
            }
        }

        // 给DOM添加页码
        var tempStr = "";
        // 上一页
        if (currentPage > 1) { //若当前页不是第一页，则可以添加点击事件跳转到前一页
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + 1 + "," + psize + ")\">首页</a></li>";
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a></li>";

        } else { //若当前页是第一页，则不添加点击事件
            tempStr += "<li><a href=\"#\">首页</a></li>";
            tempStr += "<li><a href=\"#\"><上一页</a></li>";

        }
        // 中间页 （这里的代码仔细看，是通过if语句来判断当前点击的是哪一页，再进行拼接省略号(...)，根据当前页显示页码的个数可以自己改）  
        if (totalPage < 5) {
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
            }
        } else if (totalPage > 5) {
            if (currentPage < 5) {
                for (var j = 1; j <= 5; j++) {
                    tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                }
                tempStr += "<li><a href=\"#\">...</a></li>";
            } else if (currentPage >= 5) {
                for (var j = 1; j <= 3; j++) {
                    tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                }
                tempStr += "<li><a href=\"#\">...</a></li>";
                if (currentPage + 1 == totalPage) {
                    for (var j = currentPage - 2; j <= totalPage; j++) { //当前页点击到倒数第二个页码时，...后面3个页码显示出来
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                } else if (currentPage == totalPage) { //如果当前就是最后一页，那么...后面显示3个页码
                    for (var j = currentPage - 3; j <= totalPage; j++) {
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                } else { //其他情况：总页码大于当前页码
                    for (var j = currentPage; j <= totalPage - 1; j++) {
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                    tempStr += "<li><a href=\"#\">...</a></li>";
                }
            }
        }

        // 下一页
        if (currentPage < totalPage) {
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a></li>";
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + totalPage + "," + psize + ")\">尾页</a></li>";

        } else {
            tempStr += "<li><a href=\"#\"><下一页</a></li>";
            tempStr += "<li><a href=\"#\">尾页</a></li>";
        }
        document.getElementById("pagination").innerHTML = tempStr;
        idecs.innerHTML = "共" + num + "条记录，分" + totalPage + "页显示，当前" + currentPage + "页";
        var arr = document.getElementsByTagName("a");
        // 这里用来实现点击切换样式
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].innerHTML == pno && arr[i].className.indexOf('active') > -1) {
                console.log(pno)
                console.log(arr[i])
                arr[i].style.color = 'red'
            }
        }
    }
</script>
